import React, { useState, useEffect, Fragment } from 'react';
import {Button, Icon, Card, notification} from 'antd'
import router from 'umi/router'
import styles from './index.less';
import { connect } from 'dva';
import { queryAuditDetail, getTaskId, queryAuditProgress, getDepartment } from '../service';
import { useActivate } from 'react-activation';

import BasisMes from '../components/AuditTables/BasisMes';
import CompensationInfo from '../components/AuditTables/CompensationInfo';
import CompensationStandard from '../components/AuditTables/CompensationStandard';
import PassengerMaintain from '../components/AuditTables/PassengerMaintain';
import AuditProgress from '../components/AuditTables/AuditProgress';
import PassengerList from '../components/AuditTables/PassengerList';
import Title from '../components/AuditTables/Title';
import SuccessModal from '../components/AuditTables/SuccessModal';
import AuditModal from '../components/AuditTables/AuditModal'; // 审核弹框
import ObjectOfApproval from '../components/AuditTables/ObjectOfApproval'; // 审核部门
import AuthComponent from '@/components/Authorized/AuthComponent';

const orderSubTypeMap = new Map()
  .set('0', '临时补偿信息')
  .set('1', '结案补偿信息')
  .set('2', '箱包补偿信息');

const AuditDetail =  (props) => {
  const {location: {state}} = props;
  const [auditProgressData, handleAuditProgressData] = useState([]); // 审核流程
  const [orderId, handleOrderId] = useState('')
  const [auditData, handleAuditData] = useState({}) // 审核弹框所需字段
  const [auditModalVisible, handleAuditModalVisible] = useState(false) // 审核第一步 弹框
  const [approvalData, handleApprovalData] = useState({}) // 审核第二步-  弹框数据
  const [approvalVisible, handleApprovalVisible] = useState(false) // 审核第二步- 弹框
  const [successModalVisible, handleSuccessModalVisible] = useState(false) //展示审核成功弹框
  const [inited, setInited] = useState(true)   // 防止多次请求
  const [taskId, handleTaskId] = useState('')
  const [processNode, handleProcessNode] = useState('')
  const [orderDetailInfo, handleOrderDetailInfo] = useState({}) // 基本信息
  const [eCompensateInfo, handlECompensateInfo] = useState([]) // 补偿标准
  const [bCompensateInfoVo, handlBCompensateInfo] = useState({}) // 旅客维护
  const [checkedPaxList, handelCheckedPaxList] = useState([]); // 已选旅客列表
  const [isTable, handleTable] = useState(false); // 旅客列表收缩展开

  const toggleTable = ()=> {
		isTable?handleTable(false):handleTable(true);
  }
  // 关闭新开的tab
  const clearTabs = () => {
    props.dispatch({
      type: 'auditDetail/removeTabs',
      payload: {
        removeTabsPathname:props.location.pathname
      }
    });
  }
  // 页面缓存之后，再次打开更新数据
  useActivate(() => {
    loadFun()
  })

  useEffect(() => {
    if (JSON.stringify(state) == "{}" || !state) {
      notification.info({
        description: '页面参数不能为空',
        message: '系统提示',
      });
      router.push({
        pathname: '/compensation/CompensationAudit',
        state: {
          refreshPage: true
        }
      })
      clearTabs();
    }else{
      if (inited) {
        loadFun()
      } else {
        setInited(false)
      }
    }
  },[state])

  const loadFun = () => {
    handleOrderId(state?.orderId)

    // 获取taskId
    getTaskId({orderId: state?.orderId}).then(res =>{
      // if (res.taskId && res.processNode) {
        handleTaskId(res.taskId)
        handleProcessNode(res.processNode)
      // }
    })
    // 详情信息 todo 接口添加异常行李三种补偿类型的数据
    queryAuditDetail({orderId: state?.orderId}).then(res=>{
      handleOrderDetailInfo(res.orderDetailInfo)
      handlECompensateInfo(res)
      handlBCompensateInfo(res.orderDetailInfo)
    })
    // 审核流程
    queryAuditProgress({orderId: state?.orderId}).then(res=>{
      handleAuditProgressData(res)
    })
  }

  const FooterButton = () => {
    return (
      <p className={styles.buttons}>
        <AuthComponent authCode="compensation.audit.auditOp">
          <Button type='primary'
          onClick={ () => {
            handleAuditModalVisible(true)
            handleAuditData({...state, taskId})
          }}>审核</Button>
        </AuthComponent>

        <Button onClick={ () => {
          clearTabs();
          router.push({
            pathname: '/compensation/CompensationAudit',
            state: {
              refreshPage: true
            }
          })
        }}>返回</Button>
      </p>
    )
  }
  return (
    <div className={styles.main}>
      <Title title='基本信息'></Title>
      <BasisMes allDatas={orderDetailInfo} />
      {/* 异常行李三类补偿信息 -箱包补偿信息 -临时补偿信息 -结案补偿信息 */}
      <Fragment>
        {orderDetailInfo.payType === '1' ? <>
          <Title title={orderSubTypeMap.get(orderDetailInfo.orderSubType)}></Title>
          <CompensationInfo allDatas={orderDetailInfo} />
        </> : null }
      </Fragment>

      <Fragment>
        {orderDetailInfo.payType === '1' ? null : <>
          <Title title='补偿标准'></Title>
          <CompensationStandard allDatas={eCompensateInfo}></CompensationStandard>
        </> }
      </Fragment>

      <Title title='旅客维护'></Title>
      <PassengerMaintain allDatas={bCompensateInfoVo}></PassengerMaintain>
      <Title title='审核流程'></Title>
      <AuditProgress auditProgressData={auditProgressData}></AuditProgress>

      <div onClick={toggleTable} className={styles.passengerTitle}>
        <Title title="已选旅客列表" />
        <Icon type={isTable?"caret-down":"caret-right"} />
      </div>
      {/* 旅客列表 */}
      <Card className={isTable?styles.showTable:styles.hideTable}>
        <PassengerList allDatas={orderDetailInfo} checkedPaxList={checkedPaxList} orderId={state?.orderId}></PassengerList>
      </Card>
        {
          taskId  && processNode === '2'
          ?<FooterButton></FooterButton>
          : <div style={{height:60}}></div>
        }


        {/* 审核弹框 */}
        <AuditModal
          auditData={auditData}
          auditModalVisible={auditModalVisible}
          onClose={() => {
            handleAuditModalVisible(false);
          }}
          onSuccess={(res) => {
            handleAuditModalVisible(false)
            handleSuccessModalVisible(true)
          }}
          onNext={(res)=>{
            handleApprovalVisible(true)
            handleAuditModalVisible(false)
            handleApprovalData(res)
          }}
          ></AuditModal>

          {/* 审核弹框第二步-选择部门 */}
        <ObjectOfApproval
          approvalData={approvalData}
          approvalVisible={approvalVisible}
          handleApprovalVisible={handleApprovalVisible}
          onClose={() => {
            handleApprovalVisible(false);
          }}
          onSuccess={(res) => {
            handleApprovalVisible(false)
            handleSuccessModalVisible(true)
          }}
          ></ObjectOfApproval>

          {/* 成功弹框 */}
          <SuccessModal
            onClose={()=>{
              handleSuccessModalVisible(false)
              clearTabs();
              router.push({
                pathname: '/compensation/CompensationAudit',
                state: {
                  refreshPage: true
                }
              })
            }}
            successModalVisible={successModalVisible}
            orderId={orderId}
          ></SuccessModal>
    </div>
  );
};

export default connect(state => state?.auditDetail)(AuditDetail);
